<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import View from "./View.svelte";
    import HView from "./HView.svelte";
    import VView from "./VView.svelte";
    import FixedView from "./FixedView.svelte";
    import { fn } from "storybook/test";

    const { Story } = defineMeta({
        title: "Components/Layout/View",
        component: View,
        tags: ["autodocs"],
        argTypes: {
            axis: {
                control: "select",
                options: ["x", "y", "both"],
            },
        },
        args: {},
    });

    const centerStyle = "justify-content: center";
</script>

<Story name="Default">
    {#snippet template(args)}
        <VView class="components-layout-demo" size="450px">
            <View class="layout-demo-header" size="64px" style={centerStyle}>Header</View>
            <View style={centerStyle}>Main</View>
            <View class="layout-demo-header" size="64px" style={centerStyle}>Footer</View>
        </VView>
    {/snippet}
</Story>

<Story name="InnerSide">
    {#snippet template(args)}
        <VView class="components-layout-demo" size="450px">
            <View class="layout-demo-header" size="64px" style={centerStyle}>Header</View>
            <HView style={centerStyle}>
                <View size="200px" style={centerStyle} class="layout-demo-sider">Sider</View>
                <View style={centerStyle}>MAIN</View>
            </HView>
            <View class="layout-demo-header" size="64px" style={centerStyle}>Footer</View>
        </VView>
    {/snippet}
</Story>

<Story name="OuterSide">
    {#snippet template(args)}
        <HView class="components-layout-demo" size="450px">
            <View size="150px" style={centerStyle} class="layout-demo-sider">Sider</View>
            <VView style={centerStyle}>
                <View class="layout-demo-header" size="64px" style={centerStyle}>Header</View>
                <View style={centerStyle}>MAIN</View>
                <View class="layout-demo-header" size="64px" style={centerStyle}>Footer</View>
            </VView>
        </HView>
    {/snippet}
</Story>
